/* 主布局样式
------------------------------- */
.layout-container {
    width: 100%;
    height: 100%;
    .layout-pd {
        padding: 15px !important;
    }
    .layout-flex {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    .layout-aside {
        background: var(--prev-bg-menuBar);
        box-shadow: 2px 0 6px rgb(0 21 41 / 1%);
        height: inherit;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        overflow-x: hidden !important;
        .el-scrollbar__view {
            overflow: hidden;
        }
    }
    .layout-header {
        padding: 0 !important;
        height: auto !important;
    }
    .layout-main {
        @extend .layout-pd;
        overflow: hidden;
        width: 100%;
        display: flex;
        flex-direction: column;
        &-content {
            // height: inherit;
            height: 100%;
            border: 1px solid var(--prev-border-color-light);
            .crud-container {
                height: 100%;
                width: 100%;
                display: grid;
                grid-template-rows: auto 1fr;
                gap: 15px;
                overflow: hidden;
                .content-box {
                    :deep(.el-card__body) {
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        overflow: auto;
                        .el-table {
                            flex: 1;
                            overflow: auto;
                        }
                    }
                    .toolbar {
                        padding-bottom: 10px;
                    }
                }
            }
        }
    }
    .layout-iframe {
        padding: 0px !important;
        overflow: hidden;
        // 用于设置 iframe loading 时的高度（loading 垂直居中显示）
        .el-loading-parent--relative {
            height: 100%;
        }
    }
    // 用于界面高度自适应，主视图区 main 的内边距，用于 iframe
    .layout-padding-unset {
        padding: 0 !important;
        &-view {
            border-radius: 0 !important;
            border: none !important;
        }
    }
    .el-scrollbar {
        width: 100%;
    }
    .layout-el-aside-br-color {
        border-right: 1px solid var(--el-border-color-light, #ebeef5);
    }
    // pc端左侧导航样式
    .layout-aside-pc-220 {
        width: 220px !important;
        transition: width 0.3s ease;
    }
    .layout-aside-pc-240 {
        width: 240px !important;
        transition: width 0.3s ease;
    }
    .layout-aside-pc-64 {
        width: 64px !important;
        transition: width 0.3s ease;
    }
    .layout-aside-pc-1 {
        width: 1px !important;
        transition: width 0.3s ease;
        position: relative;
        left: -1px;
    }
    // 手机端左侧导航样式
    .layout-aside-mobile {
        position: fixed;
        top: 0;
        left: -240px;
        width: 240px;
        z-index: 9999999;
    }
    .layout-aside-mobile-close {
        left: -240px;
        transition: all 0.3s cubic-bezier(0.39, 0.58, 0.57, 1);
    }
    .layout-aside-mobile-open {
        left: 0;
        transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .layout-aside-mobile-mode {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999998;
        animation: error-img 0.3s;
    }
    .layout-mian-height-50 {
        height: calc(100vh - 50px);
    }
    .layout-columns-warp {
        flex: 1;
        display: flex;
        overflow: hidden;
    }
    .layout-hide {
        display: none;
    }
}
